<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目资料管理</title>
    <link rel="stylesheet" href="css/layui.css">
    <style>
         html, body {
            height: 100%;
            width: 100%;
            padding: 0px;
            margin: 0px;
        }
        .user {
            width: 100%;
            height: 100%;
            background: #001E3D;
        }
        .hander {
            height: 35px;
            padding: 5px 5px 5px 30px;
        }
        .hander_size {
            font-size: 20px;
            line-height: 35px;
            color: #FEFEFE;
        }
        .layui-btn {
            background-color: #2CB6F5;
            float: right;
            margin-right: 15px;
            border-radius: 3px;
            width: 55px;
        }
        .layui-btn-sm {
            line-height: 25px;
            height: 25px;
            margin-top: 7px;
        }
        .contant {
            width: 100%;
        }
        .user-self {
            height: 35px;
            background-color: #064789;
            padding-left: 30px;
            margin: 5px 2px 1px 7px;
        }
        .item {
            color: #FDFDFD;
            font-size: 14px;
            line-height: 35px;
        }
        .layui-btn-xs {
            margin-top: 7px;
            background-color: #0870E4;
        }
        #demo2 {
            float: right;
            margin-right: 70px;
        }
        .layui-laypage a, .layui-laypage span{
            height: 25px;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <!-- 用户管理 -->
    <div class="user">
        <div class="hander">
            <span class="hander_size">项目资料管理</span>
            <button type="button" class="layui-btn layui-btn-sm">搜索</button>
            <button type="button" class="layui-btn layui-btn-sm">上传</button>
        </div>
        <div class="contant">
            
        </div>
        <div id="demo2"></div>
    </div>
    <script src="js/layui/layui.js"></script>
    <script src="js/jquery.min.js"></script>
    <script>
        //测试
        var name=[1,2,3,4];
         $.ajax({
             url:'http://localhost:31100/Line/getLine',
             type:'post',
             data:{name:name},
             success:function(data){

             },
             error:function(error){
                 console.log(error)
             }
         })





        const objDate = [
            {name:'太平口地区项目',id:0},
            {name:'溢加益产业园项目',id:1},
            {name:'安陆市李店镇地区',id:2},
            {name:'安陆市雷公镇',id:3},
            {name:'杨家大山地区',id:4},
            {name:'太平口地区项目',id:5},
            {name:'溢加益产业园项目',id:6},
            {name:'安陆市李店镇地区',id:7},
            {name:'安陆市雷公镇',id:8},
            {name:'杨家大山地区',id:9},
            {name:'溢加益产业园项目',id:10},
            {name:'安陆市李店镇地区',id:11},
            {name:'安陆市雷公镇',id:12},
            {name:'杨家大山地区',id:13},
        ]

        layui.use(['laypage', 'layer'], function(){
            var laypage = layui.laypage
            ,layer = layui.layer;
            // $.ajax({
            //     url:'',
            //     type:'post',
            //     data:{name:name},
            //     success:function(data){

            //     },
            //     error:function(error){
            //         console.log(error)
            //     }
            // })
            laypage.render({
                elem: 'demo2'
                ,count: objDate.length
                ,theme: '#1E9FFF'
                ,limit: 10
                ,jump: function(obj, first){
                    document.getElementsByClassName('contant')[0].innerHTML = function(){
                        var arr = [],
                        thisData = objDate.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
                        layui.each(thisData, function(index, item){
                            arr.push(
                                '<div class="user-self">'+
                                '<span class="item">'+item.name + '...详情</span>' +
                                '<button type="button" class="layui-btn layui-btn-xs">视屏下载</button>'+
                                '<button type="button" class="layui-btn layui-btn-xs">图片下载</button>'+
                                '<button type="button" class="layui-btn layui-btn-xs">文档下载</button>'+
                                '</div>'
                            );
                        });
                        return arr.join('');
                    }();
                    
                }
            });
        })
    </script>
</body>
</html>